<template>
  <view>
    <view class="log" v-if="isEmpty">
      <view class="line"></view>
      <view v-for="(item, index) in data.changeShiftLogList" :key="index + 'a'">
        <view class="log-row" v-if="item.logType != '0' && item.logType != '7'">
          <view
            ><text class="log-row-yuan">{{ getTitle(item) }}：</text
            ><text>{{ item.handoverUserName || item.takeoverUserName || '--' }}</text>
          </view>
          <view
            ><text>处理时间：</text><text>{{ item.handoverTime || item.takeoverTime || '--' }}</text></view
          >
          <view>
            <text>{{ getNormalTitle(item) }}：</text>
            <text v-if="item.isNormal && !item.takeoverOpinion">
              <text v-if="item.isNormal == 'Y'">是</text>
              <text v-else>否</text>
            </text>
            <text v-else>
              <text v-if="item.takeoverOpinion == '1'">通过</text>
              <text v-else-if="item.takeoverOpinion == '2'">不予通过</text>
              <text v-else-if="item.takeoverOpinion == '3'"> 指定回退</text>
            </text>
          </view>
          <view>
            <text>{{ getRemarkTitle(item) }}：</text>
            <text>{{ item.handoverRemark || item.takeoverRemark || '--' }}</text>
          </view>
        </view>
      </view>
      <!-- <view v-for="(item,index) in list1" :key="index + 'a'">
				<view class="log-row" v-if="item.value.handoverUserName">
					<view><text
							class="log-row-yuan">当班{{item.label}}主办：</text><text>{{item.value.handoverUserName || '--'}}</text>
					</view>
					<view><text>处理时间：</text><text>{{item.value.handoverTime || '--'}}</text></view>
					<view>
						<text>当班{{item.label}}情况是否正常：</text>
						<text v-if="item.value.isNormal == 'Y'">是</text>
						<text v-else>否</text>
					</view>
					<view>
						<text>当班{{item.label}}情况备注：</text>
						<text>{{item.value.handoverRemark || '--'}}</text>
					</view>
				</view>
			</view> -->
      <!-- <view v-for="(item,index) in list2" :key="index + 'b'">
				<view class="log-row" v-if="item.value.handoverUserName">
					<view>
						<text
							class="log-row-yuan">当班{{item.label}}人员：</text><text>{{item.value.handoverUserName || '--'}}</text>
					</view>
					<view><text>处理时间：</text><text>{{item.value.handoverTime || '--'}}</text></view>
					<view>
						<text>当班{{item.label}}情况是否正常：</text>
						<text v-if="item.value.isNormal == 'Y'">是</text>
						<text v-else>否</text>
					</view>
					<view>
						<text>当班{{item.label}}情况备注：</text>
						<text>{{item.value.handoverRemark || '--'}}</text>
					</view>
				</view>
			</view> -->

      <!-- 接班 -->
      <!-- <view  v-for="(item,index) in list1" :key="index + 'c'">
				<view class="log-row" v-if="item.value.takeoverUserName">
					<view><text
							class="log-row-yuan">接班{{item.label}}主办：</text><text>{{item.value.takeoverUserName || '--'}}</text>
					</view>
					<view><text>处理时间：</text><text>{{item.value.takeoverTime || '--'}}</text></view>
					<view>
						<text>接班{{item.label}}主办意见：</text>

					</view>
					<view>
						<text>接班{{item.label}}主办意见说明：</text>
						<text>{{item.value.takeoverRemark || '--'}}</text>
					</view>
				</view>
			</view>

			<view v-for="(item,index) in list3" :key="index + 'd'">
				<view class="log-row" v-if="item.value.takeoverUserName">
					<view><text
							class="log-row-yuan">接班{{item.label}}人员：</text><text>{{item.value.takeoverUserName || '--'}}</text>
					</view>
					<view><text>处理时间：</text><text>{{item.value.takeoverTime || '--'}}</text></view>
					<view>
						<text>接班{{item.label}}人员意见：</text>
						<text v-if="item.value.takeoverOpinion == '1'">通过</text>
						<text v-else>不通过</text>
					</view>
					<view>
						<text>接班{{item.label}}人员意见说明：</text>
						<text>{{item.value.takeoverRemark || '--'}}</text>
					</view>
				</view>
			</view> -->
    </view>

    <view v-else>
      <Empty />
    </view>
  </view>
</template>
<script>
import Empty from '@/components/cu-empty/index.vue'
export default {
  props: {
    data: {
      type: Object
    }
  },
  components: {
    Empty
  },
  data() {
    return {
      obj: {
        1: '生产',
        2: '设备',
        3: '安全',
        4: '综合',
        5: '其他',
        6: '其他'
      }
    }
  },
  computed: {
    isEmpty() {
      for (var i = 0; i < this.data.changeShiftLogList.length; i++) {
        let logType = this.data.changeShiftLogList[i].logType
        if (logType == '1' || logType == '2' || logType == '3' || logType == '4' || logType == '5' || logType == '6') {
          return true
        }
      }
      return false
    }
  },
  methods: {
    getTitle(item) {
      return (
        (item.handoverUserName ? '当班' : '接班') +
        this.obj[item.logType] +
        ([1, 2, 3, 4].indexOf(Number(item.logType)) > -1 ? '主办' : '人员')
      )
    },
    getNormalTitle(item) {
      return (
        (item.handoverUserName ? '当班' : '接班') +
        this.obj[item.logType] +
        ([1, 2, 3, 4].indexOf(Number(item.logType)) > -1 ? '' : '人员') +
        (item.handoverUserName ? '情况是否正常' : '意见')
      )
    },
    getRemarkTitle(item) {
      return (
        (item.handoverUserName ? '当班' : '接班') +
        this.obj[item.logType] +
        ([1, 2, 3, 4].indexOf(Number(item.logType)) > -1 ? '' : '人员') +
        '情况备注'
      )
    }
  }
}
</script>
<style scoped lang="scss">
.log {
  position: relative;
  background: #fff;
  padding-left: 62rpx;
  box-sizing: border-box;

  .line {
    height: 100%;
    background: #d5d7e3;
    position: absolute;
    width: 1rpx;
    top: 0;
    left: 33rpx;
    bottom: 0;
  }

  .log-row {
    font-size: 28px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 30rpx 20rpx 20rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #d5d7e3;

    & > view {
      margin-bottom: 10rpx;
      display: flex;
      align-items: flex-start;

      & text:first-child {
        color: #666666;
        position: relative;
      }

      & text:last-child {
        color: #333333;
        flex: 1;
        word-break: break-all;
      }
    }

    & > .log-row-long {
      flex-direction: column;
    }

    & > view:last-child {
      margin-bottom: 0;
    }
  }

  .log-row:last-child {
    border: 0;
  }

  .log-row-yuan::before {
    content: '';
    position: absolute;
    width: 26rpx;
    height: 26rpx;
    border: 1rpx solid #88b4c4;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: -44rpx;
  }

  .log-row-yuan::after {
    content: '';
    position: absolute;
    width: 17rpx;
    height: 17rpx;
    background: #88b4c4;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: -37.5rpx;
  }
}
</style>
